<template>
  <div class="manager-page-container">
    <div class="page-filter">
      <el-form :inline="true" :model="page.filter" class="demo-form-inline">
        <el-form-item label="角色名称">
          <el-input v-model="page.filter.name" placeholder="输入角色名称" />
        </el-form-item>
        <el-form-item label="角色类型">
          <el-select v-model="page.filter.type" placeholder="选择角色类型">
            <el-option label="业务角色" value="0" />
            <el-option label="管理角色" value="1" />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="page-filter-btns">
        <el-button type="primary" size="small" @click="refreshPageFilter">重置</el-button>
        <el-button type="primary" size="small" @click="submitPageFilter">查询</el-button>
      </div>
    </div>
    <div class="page-table">
      <div class="page-table-btns">
        <el-button type="primary" size="small" @click="newUserForm">新增</el-button>
      </div>
      <div ref="page-table-view" class="page-table-view">
        <el-table v-if="showTable" ref="page-table-el" v-loading="loadingTable" :height="tableHeight" border style="width: 100%" :data="page.records" @sort-change="sortChange">
          <el-table-column prop="name" label="角色名称" width="180" sortable="custom" />
          <el-table-column prop="code" label="角色代码" width="180" sortable="custom" />
          <el-table-column prop="type" label="角色类型">
            <template #default="scope"> {{ enumDefines.types[scope.row.type] }}</template>
          </el-table-column>
          <el-table-column prop="enable" label="是否可用">
            <template #default="scope"> {{ enumDefines.enables[scope.row.enable] }}</template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" />
          <el-table-column fixed="right" label="Operations" width="120">
            <template #default="scope">
              <el-popconfirm
                confirm-button-text="确认"
                cancel-button-text="不用了"
                icon="el-icon-info"
                icon-color="red"
                title="确定删除吗？"
                @onConfirm="deletedUser(scope.row.id)"
              >
                <el-button slot="reference" type="text" size="small">delete</el-button>
              </el-popconfirm>
              <el-button type="text" size="small" @click.prevent="editedUserForm(scope.row)">edited</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-pagination">
        <el-pagination
          :current-page="page.current"
          :page-sizes="[15, 30, 100, 300]"
          :page-size="page.size"
          layout="sizes, prev, pager, next"
          :total="page.total"
          @size-change="pageFilterHandler"
          @current-change="pageFilterHandler"
        />
      </div>
    </div>
    <div class="page-confirm-view">
      <el-dialog :visible="dialogFormVisible" :title="isUpdate? '编辑角色信息' : '新增角色'" :show-close="false">
        <el-form ref="dialogForm" :model="dialogForm" label-width="60px">
          <el-form-item label="名称">
            <el-input v-model="dialogForm.name" placeholder="输入名称" />
          </el-form-item>
          <el-form-item label="代码">
            <el-input v-model="dialogForm.code" placeholder="输入代码" />
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="dialogForm.type" placeholder="选择类型">
              <el-option label="业务角色" :value="0" />
              <el-option label="管理角色" :value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="功能">
            <el-select v-model="dialogForm.functionIds" multiple placeholder="选择功能">
              <el-option v-for="item in cascaderFunctionOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="dialogForm.remark" placeholder="输入备注" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancelForm">取消</el-button>
            <el-button type="primary" @click="confirmForm">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script>

import managerPage from '@/mixin/manager-page'
import { newRole, pageFilter, edited, deleted } from '@/api/role.js'
import { list } from '@/api/function'

export default {
  name: `role-manager`,
  mixins: [managerPage],
  data() {
    return {
      enumDefines: {
        types: ['业务角色', '管理角色'],
        enables: ['否', '是']
      },
      page: {
        current: 1,
        size: 15,
        total: 1000,
        orders: [],
        filter: {},
        records: []
      },
      cascaderFunctionOptions: [],
      loadingTable: false,
      dialogFormVisible: false,
      dialogForm: {},
      isUpdate: false
    }
  },
  async mounted() {
    await list().then(rsp => {
      let data = []
      if (rsp && rsp.code === 200) {
        data = rsp.data || []
      }
      data.forEach(element => {
        this.cascaderFunctionOptions.push({ value: element.id, label: element.name })
      })
    })
    await this.pageFilterHandler()
  },
  methods: {
    sortChange(sortData) {
      const { order, prop } = sortData
      const column = prop
      let asc = true
      if (order === 'descending') {
        asc = false
      }
      const orders = [{ column, asc }]
      this.$set(this.page, 'orders', orders)
      this.pageFilterHandler()
    },
    refreshPageFilter() {
      this.page.filter = {}
    },
    submitPageFilter() {
      this.pageFilterHandler()
    },
    newUserForm() {
      this.isUpdate = false
      this.dialogFormVisible = true
      this.dialogForm = { roleIds: [], deptIds: [] }
    },
    editedUserForm(row) {
      this.isUpdate = true
      this.dialogFormVisible = true
      this.dialogForm = { ...row, roleIds: row.roleIds || [], deptIds: row.deptId ? [row.deptId] : [] }
    },
    deletedUser(id) {
      deleted({ id }).then(rsp => {
        if (rsp.data) {
          this.$message.success('删除成功')
        } else {
          this.$message.error('删除失败')
        }
      }).catch(e => {
        this.$message.error('删除失败')
        console.error('删除失败', e)
      })
      this.pageFilterHandler()
    },
    confirmForm() {
      let callback
      if (this.isUpdate) {
        callback = edited({ ...this.dialogForm, deptId: this.dialogForm.deptIds[0] })
      } else {
        callback = newRole({ ...this.dialogForm, deptId: this.dialogForm.deptIds[0] })
      }
      callback.then(async rsp => {
        if (rsp.data) {
          await this.pageFilterHandler()
          this.cancelForm()
          this.$message.success('处理成功')
        } else {
          this.$message.error('处理失败')
        }
      }).catch(e => {
        this.$message.error('处理失败')
        console.error('处理失败', e)
      })
      this.pageFilterHandler()
    },
    cancelForm() {
      this.dialogFormVisible = false
    },
    pageFilterHandler() {
      this.loadingTable = true
      return pageFilter({ ...this.page, records: null }).then(rsp => {
        if (rsp && rsp.code === 200) {
          if (rsp.data) {
            this.page.records = rsp.data.records || []
            this.page.total = rsp.data.total || this.page.total
          }
        }
        this.loadingTable = false
      }).catch(e => {
        this.$message.error('查询失败')
        console.error('查询失败', e)
        this.loadingTable = false
      })
    },
    convert(pid, data) {
      pid = pid || 0
      const children = []
      data.forEach(item => {
        if (pid === (item.pid || 0)) {
          children.push({ value: item.id, label: item.name })
        }
      })
      if (children.length === 0) {
        return null
      }
      children.forEach(item => {
        item.children = this.convert(item.value, data)
      })
      return children
    }
  }
}
</script>

<style lang="scss">
@import '@/scss/manager-page.scss';
</style>
